{layout name="common/layout" /}
<style>
	body {
		background-color: rgb(244, 246, 248);
	}

	a {
		text-decoration: none;
	}

	ul {
		list-style: none;
	}

	/* 店铺类别 */
	.shop-category {
		margin-top: 20px;
	}

	.shop-category-detail {
		display: flex;
		padding: 19px 0 5px 15px;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(102, 110, 117, 0.09);
	}

	.shop-category-title {
		width: 360px;
	}

	.shop-category-li a {
		display: block;
		font-size: 12px;
		color: rgb(51, 51, 51);
	}

	.shop-category-li ul {
		display: flex;
		margin: 0;
		flex-wrap: wrap;
	}

	.shop-category-li li {
		width: 80px;
		margin-right: 113px;
	}

	.shop-category-li li a {
		margin-bottom: 29px;
	}

	/* 主体内容 */
	.content {
		margin: 10px auto 0;
		padding: 0 15px;
		width: 1170px;
	}

	.content-tabs {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 6px 0 6px 15px;
		background-color: #fff;
		border-bottom: 1px solid rgba(102, 110, 117, 0.09);
		font-size: 12px;
		box-sizing: border-box;
	}

	.content-tabs div {
		margin-right: 34px;
	}

	.content-tabs label {
		margin-right: 10px;
	}

	.content-tabs form {
		display: flex;
		align-items: center;
	}

	.content-tabs select {
		width: 225px;
		height: 28px;
		color: rgb(153, 153, 153);
		background: rgb(255, 255, 255);
		border: 1px solid rgb(196, 196, 196);
	}

	.content-tabs option {
		color: #000;
	}

	.content-tabs .option-placeholder {
		display: none;
	}

	.content-tabs button {
		width: 60px;
		height: 28px;
		color: #fff;
		border: 0;
		background: rgb(0, 123, 255);
		border-radius: 5px;
	}

	.content-tabs-input {
		width: 225px;
		height: 28px;
		background: rgb(255, 255, 255);
		border: 1px solid rgb(196, 196, 196);
	}

	/* 店铺列表 */
	.content-shops {
		width: 100%;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(102, 110, 117, 0.09);
	}

	.content-shop {
		padding: 18px 0 20px 13px;
		border-bottom: 2px solid rgba(102, 110, 117, 0.09);
		box-sizing: border-box;
	}

	.content-shop-info {
		display: flex;
		width: 100%;
	}

	.content-shop-info>a {
		display: flex;
	}

	.content-shop-info img {
		margin-right: 12px;
	}

	.content-shop-info .content-shop-name {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 294px;
		padding: 3px 0 5px;
	}

	.content-shop-info .content-shop-name b {
		font-size: 14px;
	}

	.content-shop-info .content-shop-name div {
		font-size: 12px;
	}

	.content-shop-info .content-shop-count {
		margin-right: 131px;
		padding: 3px 0 5px;
		font-size: 12px;
	}

	.content-shop-info .content-shop-count div {
		margin-bottom: 9px;
	}

	.content-shop-info .content-shop-credit {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 3px 0 5px;
		font-size: 12px;
	}

	/* 店铺商品 */
	.content-shop-product {
		display: flex;
		justify-content: space-between;
		margin-top: 12px;
		margin-left: 56px;
		padding: 16px 60px;
		width: 1054px;
		height: 318px;
		background-color: rgb(248, 248, 248);
		border: 1px solid rgb(221, 221, 221);
		box-sizing: border-box;
	}

	.content-shop-product .product {
		display: flex;
		flex-direction: column;
		padding: 11px 17.5px 0;
		width: 215px;
		height: 285px;
		background-color: #fff;
		box-sizing: border-box;
	}

	.content-shop-product .product .description {
		margin-top: 8px;
		color: rgb(153, 153, 153);
		font-family: 思源黑体;
	}

	.content-shop-product .product .price {
		margin-top: 10px;
		color: red;
	}

	.content-shop-product a .img {
		overflow: hidden;
	}

	.content-shop-product a img {
		transition: transform 0.1s ease-in;
	}

	.content-shop-product a img:hover {
		transform: scale(1.1);
	}

	/* 分页栏 */
	.content-pages {
		display: flex;
		justify-content: end;
		padding: 40px 22px 36px 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(102, 110, 117, 0.09);
		box-sizing: border-box;
	}

	.content-pages ul {
		display: flex;
		margin: 0 4px 0 9px;
		padding-left: 0;
	}

	.content-pages li,
	.content-pages div {
		padding: 0 6px;
		height: 23px;
		color: rgb(153, 153, 153);
		font-family: 思源黑体;
		font-size: 12px;
		line-height: 23px;
		background: rgb(255, 255, 255);
		border: 1px solid rgb(221, 221, 221);
	}

	.content-pages li {
		margin-right: 5px;
	}

	/* 三角箭头 */
	.triangle {
		position: relative;
	}

	.triangle-up {
		position: absolute;
		top: -1px;
		left: 29px;
		width: 0px;
		height: 0px;
		border: 4px solid black;
		border-left-color: transparent;
		border-right-color: transparent;
		border-top-color: transparent;
	}

	.triangle-down {
		position: absolute;
		top: 10px;
		left: 29px;
		width: 0px;
		height: 0px;
		border: 4px solid black;
		border-left-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}
</style>

<div class="shop-category">
	<div class="container">
		<div class="shop-category-detail">
			<div class="shop-category-title">店铺类别：</div>
			<div class="shop-category-li">
				<div>
					<ul>
						<li><a href="/shop/stores">全部</a></li>
						{foreach $categories as $category}
						<li>
							<a href="/shop/stores?type={$category.id}">{$category.name}</a>
						</li>
						{/foreach}
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="content">
	<div class="content-tabs">
		<div>默认</div>
		<div class="triangle">
			销量
			<div class="triangle-up"></div>
			<div class="triangle-down"></div>
		</div>
		<div class="triangle">
			信用
			<div class="triangle-up"></div>
			<div class="triangle-down"></div>
		</div>

	</div>
	<div class="content-shops">
		<div class="content-shop">
			<a href="/shop/store/2">
				<div class="content-shop-info">
					<img src="/assets/img/草莓.avif" alt="" width="74px" height="74px" />
					<div class="content-shop-name">
						<b>中虎泰合自营店</b>
						<div>主营商品</div>
						<div>店主：18656258956</div>
					</div>
					<div class="content-shop-count">
						<div>商品数量<span>56</span>件</div>
						<div>暂无销量</div>
					</div>
					<div class="content-shop-credit">
						<div>信用度：</div>
						<div>好评率：<span>100%</span></div>
						<div>店铺动态评分：</div>
					</div>
				</div>
			</a>
		</div>
		<div class="content-shop">
			<div class="content-shop-info">
				<a href="/shop/store/1">
					<img src="/assets/img/3shu.png" alt="" width="74px" height="74px" />
					<div class="content-shop-name">
						<b>早点自营店</b>
						<div>主营商品</div>
						<div>店主：18656258956</div>
					</div>
					<div class="content-shop-count">
						<div>商品数量<span>56</span>件</div>
						<div>暂无销量</div>
					</div>
					<div class="content-shop-credit">
						<div>信用度：</div>
						<div>好评率：<span>100%</span></div>
						<div>店铺动态评分：</div>
					</div>
				</a>
			</div>
			<div class="content-shop-product">
				{foreach $goodsList as $goods}
				<a href="{$goods.url}">
					<div class="product">
						<div class="img"><img src="{$goods.image|cdnurl}" width="180px" height="180px" /></div>
						<div class="description"><a href="{$goods.url}" title="{$goods.title}">{$goods.title}</a></div>
						<div class="price">￥<span>{$goods.price}</span></div>
					</div>
				</a>
				{/foreach}
			</div>
		</div>

	</div>

</div>
